<template>
	<div class="home-container layout-pd">
		<div style="display: flex;justify-content:space-evenly;">
			<!-- 第一行总数值展示 -->
			<router-link to="/warehouse/wh" class="no_underline">
				<div class="grid-content">
					<div style="flex:1">
						<center class="value">{{ state.whTotal }}</center>
						<center class="name"> 仓库数 </center>
					</div>
					<div>
						<img src="../../assets/test.png" alt="">

					</div>
				</div>
			</router-link>
			<router-link to="/warehouse/area" class="no_underline">
				<div class="grid-content">
					<div>
						<center class="value">{{ state.Regiontotal }}</center>
					<center class="name"> 区域数 </center>
					</div>
	
					<div>
						<img src="../../assets/test.png" alt="">

					</div>
				</div>
			</router-link>
			<router-link to="/warehouse/locations" class="no_underline">
				<div class="grid-content">
					<div>
						<center class="value">{{ state.KUweitotal }}</center>
					<center class="name"> 库位数 </center>
					</div>
					<div>
						<img src="../../assets/test.png" alt="">

					</div>
				</div>
			</router-link>

			<router-link to="/warehouse/locations" class="no_underline">
				<div class="grid-content">
					<div>
						<center class="value">{{ differenceValue }}</center>
					<center class="name"> 可用库位 </center>
					</div>
					<div>
						<img src="../../assets/test.png" alt="">

					</div>
				</div>
			</router-link>
			<router-link to="/warehouse/inventory" class="no_underline">
				<div class="grid-content">
					<div>
						<center class="value">{{ state.total }}</center>
					<center class="name"> 库存总数 </center>
					</div>
					<div>
						<img src="../../assets/test.png" alt="">

					</div>
				</div>
			</router-link>
			<!-- <router-link to="/dashboard/safeStorage" class="no_underline">
					<div class="grid-content">
						<center class="value">{{ safeStorage }}</center>
						<center class="name"> 安全库存低 </center>
					</div>
				</router-link>

				<router-link to="/dashboard/safeStorage" class="no_underline">
					<div class="grid-content">
						<center class="value">{{ stateNumStore.timeControl }}</center>
						<center class="name"> 即将到达规定时间 </center>
					</div>
				</router-link>

				<router-link to="/dashboard/safeStorage" class="no_underline">
					<div class="grid-content">
						<center class="value">{{ stateNumStore.outTimeControl }}</center>
						<center class="name"> 超出规定时间 </center>
					</div>
				</router-link> -->
		</div>
		<!-- 折线图 -->
		<el-row :gutter="24" class="mb15" style="margin-top: 10px; ">
			<!-- 满空库存占比 -->
			<el-col :xs="18" :sm="8" :md="10" :lg="7" :xl="10" style="flex-shrink: 1;">
				<div class="home-card-item">
					<div style="height: 100%" ref="homePieRef2"></div>
				</div>
			</el-col>
			<el-col style="flex-shrink: 1;" :xs="18" :sm="8" :md="10" :lg="7" :xl="10">
				<div class="lay">
					<div class="insideLay">
						<div style="order:1;font-size: 26px;color:orange;flex:8;display: flex;align-items: center;">

							{{ safeStorage }}

						</div>
						<div style="order: 0;font-weight: bold;flex: 2;display: flex;align-items: center;">
							安全库存偏低
						</div>
					</div>
					<div class="insideLay">
						<div style="order:1;font-size: 26px;color:orange;flex:8;display: flex;align-items: center;">{{
							stateNumStore.timeControl }}</div>
						<div style="order: 0;font-weight: bold;flex: 2;display: flex;align-items: center;"> 即达规定时间</div>
					</div>
					<div class="insideLay">
						<div style="order:1;font-size: 26px;color:orange;flex:8;display: flex;align-items: center;">{{
							stateNumStore.outTimeControl }}</div>
						<div style="order: 0;font-weight: bold;flex: 2;display: flex;align-items: center;">超出规定时间</div>
					</div>
				</div>

			</el-col>
			<el-col :xs="18" :sm="8" :md="10" :lg="7" :xl="10" style="flex-shrink: 1;">
				<div class="home-card-item">
					<div style="height: 100%" ref="homePieRef"></div>
				</div>
			</el-col>
		</el-row>
		<div style="width: 100%;display: flex;flex-direction: column;justify-content:center;">
			<el-row :gutter="24" class="home-card-two mb15" style="margin-top: 20px">
				<el-col :xs="24" :sm="8" :md="4" :lg="10" :xl="10">
					<div class="home-card-item">
						<div style="height: 100%" ref="homeLineRef"></div>
						<el-button type="primary" @click="changeYear(2023)">2023</el-button>
						<el-button type="primary" @click="changeYear(2024)">2024</el-button>
					</div>
				</el-col>
				<!-- 库存量饼图 -->
				<el-col :xs="24" :sm="8" :md="4" :lg="10" :xl="10">
					<div class="home-card-item">
						<div style="height: 100%" ref="DayDataRef"></div>
					</div>
				</el-col>
			</el-row>
			<!-- 柱状图 -->
			<!-- <el-row :gutter="24" class="home-card-two mb15" style="margin-top: 32px">
													<el-col :xs="18" :sm="8" :md="10" :lg="7" :xl="10">
								  <div class="home-card-item">
									<div style="height: 100%" ref="homeBarRef"></div>
		 								 </div>
												</el-col>
								  </el-row> -->
		</div>
	</div>
</template>

<script setup lang="ts" name="home">
import {
	reactive,
	onMounted,
	ref,
	watch,
	nextTick,
	onActivated,
	markRaw,
	computed,
} from "vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import { useTagsViewRoutes } from "/@/stores/tagsViewRoutes";
import { WmsApi } from "/@/api/wh";
import { useMyStore } from '/@/stores/earlyWarning'

const stateNumStore = useMyStore();
// 定义折线图变量内容
const registerUser = async () => {
	try {
		// 调用 action  
		await stateNumStore.registerSafeStorage()
		await stateNumStore.registerTimeControl()
		await stateNumStore.registerOutTimeControl()
		// action 执行完成后，stateNumStore.timeControlNum 将被更新  
	} catch (error) {
		// 在这里处理错误，比如更新组件的 error 状态  
		console.error(error)
	}
}
const safeStorage = computed(() => stateNumStore.safeStorage)
console.log(safeStorage);

const homeLineRef = ref();
// 折线图
const initLineChart = async () => {
	if (!state.global.dispose.some((b) => b === state.global.MonthlyIandExChart))
		state.global.MonthlyIandExChart.dispose();
	state.global.MonthlyIandExChart = markRaw(
		echarts.init(homeLineRef.value, state.charts.theme)
	);
	await WmsApi()
		.Putin()
		.then(function (res) {
			const yearMap = {};
			res.data.result.forEach(item => {
				const year = item.mouth.split('-')[0];
				if (!yearMap[year]) {// 如果该年份还未在映射表中，则创建一个新数组
					yearMap[year] = [];
				}
				// 将数据添加到相应年份的数组中
				yearMap[year].push(item);
			});
			//得到当年的对象数组
			state.year = new Date().getFullYear()
			console.log();
			for (let i = 0; i < 12; i++) {
				state.data[i] = 0;
				if (yearMap[state.year] && yearMap[state.year].length > 0) {
					yearMap[state.year].forEach((element, index) => {
						if (element.mouth.slice(-2) == i + 1) {
							state.data[i] = element.countSum;
						}
					});
				}
			}
		})
		.catch(function (error) {
			console.log(error);
		});
	await WmsApi()
		.Out()
		.then(function (res) {
			const yearMap = {};
			res.data.result.forEach(item => {
				const year = item.mouth.split('-')[0];
				if (!yearMap[year]) {// 如果该年份还未在映射表中，则创建一个新数组
					yearMap[year] = [];
				}
				// 将数据添加到相应年份的数组中
				yearMap[year].push(item);
			});

			//得到当年的对象数组
			state.year = new Date().getFullYear()
			for (let i = 0; i < 12; i++) {
				state.data1[i] = 0;
				if (yearMap[state.year] && yearMap[state.year].length > 0) {
					yearMap[state.year].forEach((element, index) => {
						if (element.mouth.slice(-2) == i + 1) {
							state.data1[i] = element.countSum;
						}
					})
				}
			}

		})
		.catch(function (error) {
			console.log(error);
		});
	let option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "每月出入库详情",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		grid: { top: 70, right: 20, bottom: 30, left: 60 }, //left设置左边的padding值
		tooltip: { trigger: "axis" },
		legend: { data: ["入库数量", "出库数量"], right: 0 },
		xAxis: {
			data: [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月",
				"7月",
				"8月",
				"9月",
				"10月",
				"11月",
				"12月",
			],
		},
		axisLabel: {

			color: "#fff"
		}

		,
		yAxis: [
			{

				type: "value",
				name: "数量",
				splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
				//坐标轴标签属性
				axisLabel: {
					formatter: '{value} ',
					color: "#fff"
				},
			},
		],
		series: [
			{
				name: "入库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.data,
				lineStyle: { color: "#fe9a8b" },
				itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#fe9a8bb3" },
						{ offset: 1, color: "#fe9a8b03" },
					]),
				},
			},
			{
				name: "出库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.data1,
				lineStyle: { color: "#9E87FF" },
				itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#9E87FFb3" },
						{ offset: 1, color: "#9E87FF03" },
					]),
				},
				emphasis: {
					itemStyle: {
						color: {
							type: "radial",
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: "#9E87FF" },
								{ offset: 0.4, color: "#9E87FF" },
								{ offset: 0.5, color: "#fff" },
								{ offset: 0.7, color: "#fff" },
								{ offset: 0.8, color: "#fff" },
								{ offset: 1, color: "#fff" },
							],
						},
						borderColor: "#9E87FF",
						borderWidth: 2,
					},
				},
			},
		],
	};
	state.global.MonthlyIandExChart.setOption(option);
	state.myCharts.push(state.global.MonthlyIandExChart);
};
// 库存分布占比变量
const homePieRef = ref();
// 库存分布占比图
const initPieChart = async () => {
	if (!state.global.dispose.some((b) => b === state.global.InventoryDistributionMap))
		state.global.InventoryDistributionMap.dispose();
	state.global.InventoryDistributionMap = markRaw(echarts.init(homePieRef.value, state.charts.theme));
	let getname;
	let getvalue;
	await WmsApi()
		.InvtoryPagePost({
			page: 1,
			pageSize: 100,
		})
		.then(function (res) {
			state.Data = res.data.result.items;
			//返回指定的字段，包括饼状图需要的legend图例名字和值,将getname等定义为全局变量，可以使他们不是局部变量，而被底下的getname访问到
			getname = state.Data.map((obj) => {
				return obj.materielName;
			});
			getvalue = state.Data.map((obj) => {
				return obj.sumCount;
			});
			for (let index = 0; index < state.Data.length; index++) {
				state.total = state.Data[index].sumCount + state.total;
			}
		})
		.catch(function (error) {
			console.log(error);
		});
	var data = [];
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}

	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "库存分布图",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		tooltip: { trigger: "item", formatter: "{b} <br/> {c}" },
		//图例修改
		// legend: {
		// 	type: "scroll",
		// 	orient: "vertical",
		// 	right: "0%",
		// 	left: "5%",
		// 	bottom: "5%",
		// 	itemWidth: 14,
		// 	itemHeight: 14,
		// 	data: getname,
		// 	textStyle: {
		// 		rich: {
		// 			name: {
		// 				fontSize: 14,
		// 				fontWeight: 400,
		// 				width: 200,
		// 				height: 35,
		// 				padding: [0, 0, 0, 30],
		// 				color: state.charts.color,
		// 			},
		// 			rate: {
		// 				fontSize: 15,
		// 				fontWeight: 500,
		// 				height: 35,
		// 				width: 40,
		// 				padding: [0, 0, 0, 15],
		// 				color: state.charts.color,
		// 			},
		// 		},
		// 	},
		// },
		legend: {
			type: 'scroll',
			orient: 'vertical', //图例列表的布局朝向（垂直排列）
			// right: "0%",
			left: "0%",
			bottom: "1%",
			//   y: 'center',

			itemGap: 15,//图例的上下间距
			itemWidth: 8,//图例左侧图块的长度
			padding: 5,
			// textStyle: {
			// 	fontSize: 12,
			// 	fontFamily: 'Microsoft YaHei',
			// 	fontWeight: 400,
			// 	color: 'rgba(0,0,0,0.8)',
			// },

			pageTextStyle: {//设置分页的当前页与总页码的文本样式
				color: 'rgba(36, 196, 221, 0.95)'
			},

			pageIconColor: '#6495ed', //翻页下一页的三角按钮颜色
			pageIconInactiveColor: '#aaa', //翻页（即翻页到头时）
			pageIconSize: 20, //翻页按钮大小　　　　　　pageButtonGap: 22,//翻页按钮与图例的间距
			// pageFormatter: '',//隐藏翻页的数字
			// pageButtonItemGap: 20,//翻页按钮的两个之间的间距
			// selected:this.monitorData.name可不写
			//格式化处理方案一： 
			// formatter: function (name) {
			//   return name.length > 17 ? name.substr(0, 17) + '...' : name
			// },
			//格式化处理方案二： 
			formatter: function (name) {
				return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
			},
			//开启tooltip
			tooltip: {
				show: true
			}
		},
		//饼图形状修改
		series: [
			{
				type: "pie",
				// radius: ["82", themeConfig.value.isIsDark ? "50" : "102"],
				radius: '55%',
				//此属性调整图像位置
				center: ["50%", "40%"],
				label: {
					show: false
					// normal: {
					// 	position: 'outside',
					// 	show: true,
					// 	formatter: "{c}",
					// 	textStyle: { fontSize: 13 },
					// 	overflow: 'none',
					// },
				},
				labelLine: {
					show: false
					// normal: {
					// 	length: 10,   	// 指示线长度
					// 	lineStyle: {
					// 		color: "#595959"  // 指示线颜色
					// 	}
					// },
				},
				data: data,
			},
		],
	};
	state.global.InventoryDistributionMap.setOption(option);
	state.myCharts.push(state.global.InventoryDistributionMap);
};
//每日出入库数据
const DayDataRef = ref();
//每日的出入库折线图
const initDayLineChart = async () => {
	if (!state.global.dispose.some((b) => b === state.global.DaylyIandExChart))
		state.global.DaylyIandExChart.dispose();
	state.global.DaylyIandExChart = markRaw(
		echarts.init(DayDataRef.value, state.charts.theme)
	);
	//得到每日入库数据
	await WmsApi()
		.getDayInINfo()
		.then(function (res) {
			//把返回的小时进行处理，把有库存的小时放进数组里
			const formattedHours = res.data.result.map(
				item => {
					const [date, time] = item.hourTime.split(' ')
					return time;
				});
			for (let i = 0; i < 24; i++) {
				let StrNumber = String(i);
				if (formattedHours.includes(StrNumber)) {
					//找到对应小时的对象,把数值给到对应的数组值
					let filteredItem = res.data.result.filter(item => item.hourTime.split(' ')[1] === StrNumber)[0]
					state.dayDataIn[i] = filteredItem.sumCount
				} else {
					state.dayDataIn[i] = 0;
				}
			}

		}).catch(function (error) {
			console.log(error);
		});
	//得到每日出库数据
	await WmsApi()
		.getDayOutINfo()
		.then(function (res) {
			const formattedHours = res.data.result.map(
				item => {
					const [date, time] = item.hourTime.split(' ')
					return time;
				});
			for (let i = 0; i < 24; i++) {
				let StrNumber = String(i);
				if (formattedHours.includes(StrNumber)) {
					//找到对应小时的对象,把数值给到对应的数组值
					let filteredItem = res.data.result.filter(item => item.hourTime.split(' ')[1] === StrNumber)[0]
					state.dayDataOut[i] = filteredItem.sumCount
				} else {
					state.dayDataOut[i] = 0;
				}
			}
		})

		.catch(function (error) {
			console.log(error);
		});
	let option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "每日出入库详情",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		grid: { top: 70, right: 20, bottom: 30, left: 60 }, //left设置左边的padding值
		tooltip: { trigger: "axis" },
		legend: { data: ["入库数量", "出库数量"], right: 0 },
		xAxis: {
			data: [
				"0时",
				"1时",
				"2时",
				"3时",
				"4时",
				"5时",
				"6时",
				"7时",
				"8时",
				"9时",
				"10时",
				"11时",
				"12时",
				"13时",
				"14时",
				"15时",
				"16时",
				"17时",
				"18时",
				"19时",
				"20时",
				"21时",
				"22时",
				"20时",
				"23时",
			],
			axisLabel: {

				color: "#fff"
			},
		},
		yAxis: [
			{
				type: "value",
				name: "数量",
				splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
				axisLabel: {
					color: '#fff',
					formatter: '{value} '
				},
			},
		],
		series: [
			{
				name: "入库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.dayDataIn,
				lineStyle: { color: "#fe9a8b" },
				itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#fe9a8bb3" },
						{ offset: 1, color: "#fe9a8b03" },
					]),
				},
			},
			{
				name: "出库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.dayDataOut,
				lineStyle: { color: "#9E87FF" },
				itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#9E87FFb3" },
						{ offset: 1, color: "#9E87FF03" },
					]),
				},
				emphasis: {
					itemStyle: {
						color: {
							type: "radial",
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: "#9E87FF" },
								{ offset: 0.4, color: "#9E87FF" },
								{ offset: 0.5, color: "#fff" },
								{ offset: 0.7, color: "#fff" },
								{ offset: 0.8, color: "#fff" },
								{ offset: 1, color: "#fff" },
							],
						},
						borderColor: "#9E87FF",
						borderWidth: 2,
					},
				},
			},
		],
	};
	state.global.DaylyIandExChart.setOption(option);
	state.myCharts.push(state.global.DaylyIandExChart);
};
//满空库位占比变量
const homePieRef2 = ref();
//空库位数量
const differenceValue = computed(() => {
	return state.KUweitotal - state.fulltotal;
});
//满空库位占比图
const initPieChart1 = async () => {
	if (!state.global.dispose.some((b) => b === state.global.LibraryLocationDistributionMap))
		state.global.LibraryLocationDistributionMap.dispose();
	state.global.LibraryLocationDistributionMap = markRaw(
		echarts.init(homePieRef2.value, state.charts.theme)
	);
	var getname = ["空库位", "满库位"];

	await WmsApi()
		.fullStorage(1, 10)
		.then(function (res) {
			state.fulltotal = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
	//空库位
	let differenceValue1 = state.KUweitotal - state.fulltotal;
	var getvalue = [differenceValue1, state.fulltotal];
	var data = [];
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "空满库位占比图",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		//hover时的提示文字
		tooltip: {
			trigger: 'item',
			formatter: "{b}: {c} ({d}%)"
		},
		legend: {
			type: "scroll",
			orient: "vertical",
			right: "0%",
			left: "5%",
			bottom: "13%",
			itemWidth: 14,
			itemHeight: 14,
			data: getname,
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 200,
						height: 35,
						padding: [0, 0, 0, 60],
						color: state.charts.color,
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 0, 30],
						color: state.charts.color,
					},
				},
			},
		},
		series: [
			{
				type: "pie",
				// radius: ["82", themeConfig.value.isIsDark ? "50" : "102"],
				radius: '55%',
				//此属性调整图像位置
				center: ["50%", "40%"],
				label: {
					show: false
					// normal: {
					// 	position: 'outside',
					// 	show: true,
					// 	formatter: "{d}%",
					// 	textStyle: { fontSize: 13 },
					// 	overflow: 'none',
					// },
				},
				labelLine: {
					show: false
					// normal: {
					// 	length: 10,   	// 指示线长度
					// 	lineStyle: {
					// 		color: "#595959"  // 指示线颜色
					// 	}
					// },
				},
				data: data,
			}
		]
	};
	state.global.LibraryLocationDistributionMap.setOption(option);
	state.myCharts.push(state.global.LibraryLocationDistributionMap);
};
const getNum = () => {
	StateNumStore.getSafeStorage
}
const homePieRef3 = ref();
// 未用到的柱状图变量
const homeBarRef = ref();
// 未用到的柱状图
const initBarChart = () => {
	if (!state.global.dispose.some((b) => b === state.global.histogram))
		state.global.histogram.dispose();
	state.global.histogram = markRaw(
		echarts.init(homeBarRef.value, state.charts.theme)
	);
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "地热开发利用",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		tooltip: { trigger: "axis" },
		legend: { data: ["供温", "回温", "压力值(Mpa)"], right: 0 },
		grid: { top: 70, right: 80, bottom: 30, left: 80 },
		xAxis: [
			{
				type: "category",
				data: ["1km", "2km", "3km", "4km", "5km", "6km"],
				boundaryGap: true,
				axisTick: { show: false },
			},
		],
		yAxis: [
			{
				name: "供回温度(℃）",
				nameLocation: "middle",
				nameTextStyle: { padding: [3, 4, 50, 6] },
				splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { color: state.charts.color, formatter: "{value} " },
			},
			{
				name: "压力值(Mpa)",
				nameLocation: "middle",
				nameTextStyle: { padding: [50, 4, 5, 6] },
				splitLine: { show: false },
				axisLine: { show: false },
				axisTick: { show: false },
				axisLabel: { color: state.charts.color, formatter: "{value} " },
			},
		],
		series: [
			{
				name: "供温",
				type: "line",
				smooth: true,
				showSymbol: true,
				// 矢量画五角星
				symbol: "path://M150 0 L80 175 L250 75 L50 75 L220 175 Z",
				symbolSize: 12,
				yAxisIndex: 0,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "rgba(250,180,101,0.3)" },
						{ offset: 1, color: "rgba(250,180,101,0)" },
					]),
					shadowColor: "rgba(250,180,101,0.2)",
					shadowBlur: 20,
				},
				itemStyle: { color: "#FF8000" },
				// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
				data: [
					{ value: 1, stationName: "s1" },
					{ value: 3, stationName: "s2" },
					{ value: 4, stationName: "s3" },
					{ value: 9, stationName: "s4" },
					{ value: 3, stationName: "s5" },
					{ value: 2, stationName: "s6" },
				],
			},
			{
				name: "回温",
				type: "line",
				smooth: true,
				showSymbol: true,
				symbol: "emptyCircle",
				symbolSize: 12,
				yAxisIndex: 0,
				areaStyle: {
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{ offset: 0, color: "rgba(199, 237, 250,0.5)" },
							{ offset: 1, color: "rgba(199, 237, 250,0.2)" },
						],
						false
					),
				},
				itemStyle: {
					color: "#3bbc86",
				},
				data: [
					{ value: 31, stationName: "s1" },
					{ value: 36, stationName: "s2" },
					{ value: 54, stationName: "s3" },
					{ value: 24, stationName: "s4" },
					{ value: 73, stationName: "s5" },
					{ value: 22, stationName: "s6" },
				],
			},
			{
				name: "压力值(Mpa)",
				type: "bar",
				barWidth: 30,
				yAxisIndex: 1,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "rgba(108,80,243,0.3)" },
						{ offset: 1, color: "rgba(108,80,243,0)" },
					]),
					//柱状图圆角
					borderRadius: [30, 30, 0, 0],
				},
				data: [
					{ value: 11, stationName: "s1" },
					{ value: 34, stationName: "s2" },
					{ value: 54, stationName: "s3" },
					{ value: 39, stationName: "s4" },
					{ value: 63, stationName: "s5" },
					{ value: 24, stationName: "s6" },
				],
			},
		],
	};
	state.global.histogram.setOption(option);
	state.myCharts.push(state.global.histogram);
};
const storesTagsViewRoutes = useTagsViewRoutes();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const state = reactive({
	global: {
		//月度出入库统计图
		MonthlyIandExChart: null,
		// 每日出入库统计图
		DaylyIandExChart: null,
		//库存分布图
		InventoryDistributionMap: null,
		// 库位分布图
		LibraryLocationDistributionMap: null,
		//未用到的柱状图
		histogram: null,
		dispose: [null, "", undefined],
	},
	whTotal: 0,
	homeOne: [
		{
			num1: "5",
			num2: "块",
			num3: "区域数",
			num4: "fa fa-meetup",
			color1: "#FF6462",
			color2: "--next-color-primary-lighter",
			color3: "--el-color-primary",
		},
		{
			num1: "52",
			num2: "个",
			num3: "库位数",
			num4: "iconfont icon-ditu",
			color1: "#6690F9",
			color2: "--next-color-success-lighter",
			color3: "--el-color-success",
		},
		{
			num1: "8000",
			num2: "个",
			num3: "库存总数",
			num4: "iconfont icon-zaosheng",
			color1: "#6690F9",
			color2: "--next-color-warning-lighter",
			color3: "--el-color-warning",
		},
	],
	homeThree: [
		{
			icon: "iconfont icon-yangan",
			label: "浅粉红",
			value: "2.1%OBS/M",
			iconColor: "#F72B3F",
		},
		{
			icon: "iconfont icon-wendu",
			label: "深红(猩红)",
			value: "30℃",
			iconColor: "#91BFF8",
		},
		{
			icon: "iconfont icon-shidu",
			label: "淡紫红",
			value: "57%RH",
			iconColor: "#88D565",
		},
		{
			icon: "iconfont icon-shidu",
			label: "弱紫罗兰红",
			value: "107w",
			iconColor: "#88D565",
		},
		{
			icon: "iconfont icon-zaosheng",
			label: "中紫罗兰红",
			value: "57DB",
			iconColor: "#FBD4A0",
		},
		{
			icon: "iconfont icon-zaosheng",
			label: "紫罗兰",
			value: "57PV",
			iconColor: "#FBD4A0",
		},
		{
			icon: "iconfont icon-zaosheng",
			label: "暗紫罗兰",
			value: "517Cpd",
			iconColor: "#FBD4A0",
		},
		{
			icon: "iconfont icon-zaosheng",
			label: "幽灵白",
			value: "12kg",
			iconColor: "#FBD4A0",
		},
		{
			icon: "iconfont icon-zaosheng",
			label: "海军蓝",
			value: "64fm",
			iconColor: "#FBD4A0",
		},
	],
	myCharts: [],
	charts: {
		theme: "",
		bgColor: "",
		color: "#303133",
	},
	Data: [],
	total: 0,
	Regiontotal: 0,
	KUweitotal: 0,
	fulltotal: 0,
	//每月入库数据
	data: [],
	//每月出库数据
	data1: [],
	//每日入库数据
	dayDataIn: [],
	dayDataOut: [],
	//折线图的年份选择
	year: 2024,
	rosedata: []
});
// 调用echarts方法要写在mounted周期里，因为在那时候DOM树都挂满了，才可以渲染
onMounted(async () => {
	registerUser();

	//得到仓库数目
	await WmsApi().WhPagePost({ "page": 1, "pageSize": 100 })
		.then(function (res) {
			state.whTotal = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
	await WmsApi()
		.RegionPagePost({ "page": 1, "pageSize": 100 })
		.then(function (res) {
			state.Regiontotal = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
	await WmsApi()
		.fullStorage(1, 10)
		.then(function (res) {
			state.fulltotal = res.data.result.total;
		})
		.catch(function (error) {
			console.log(error);
		});
	await WmsApi()
		.eGStoragePagePost({ "page": 1, "pageSize": 100 })
		.then(function (res) {
			state.KUweitotal = res.data.result.total;
		})
		.catch(function (error) { });
});

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			setTimeout(() => {
				state.myCharts[i].resize();
			}, i * 1000);
		}
	});
};
// 批量设置 echarts resize。当浏览器窗口的大小发生变化时（即发生 "resize" 事件），initEchartsResizeFun 函数会被调用。
const initEchartsResize = () => {
	window.addEventListener("resize", initEchartsResizeFun);
};
const changeYear = async (y) => {
	state.year = y
	console.log(y);

	await WmsApi()
		.Putin()
		.then(function (res) {
			const yearMap = {};
			res.data.result.forEach(item => {
				const year = item.mouth.split('-')[0];
				if (!yearMap[year]) {// 如果该年份还未在映射表中，则创建一个新数组
					yearMap[year] = [];
				}
				// 将数据添加到相应年份的数组中
				yearMap[year].push(item);
			});
			//得到当年的对象数组
			for (let i = 0; i < 12; i++) {
				state.data[i] = 0;
				if (yearMap[state.year] && yearMap[state.year].length > 0) {
					yearMap[state.year].forEach((element, index) => {
						if (element.mouth.slice(-2) == i + 1) {
							state.data[i] = element.countSum;
						}
					});
				}
			}
			console.log(state.data + '##' + state.year);
		})
		.catch(function (error) {
			console.log(error);
		});
	await WmsApi()
		.Out()
		.then(function (res) {
			const yearMap = {};
			res.data.result.forEach(item => {
				const year = item.mouth.split('-')[0];
				if (!yearMap[year]) {// 如果该年份还未在映射表中，则创建一个新数组
					yearMap[year] = [];
				}
				// 将数据添加到相应年份的数组中
				yearMap[year].push(item);
			});

			//得到当年的对象数组
			for (let i = 0; i < 12; i++) {
				state.data1[i] = 0;
				if (yearMap[state.year] && yearMap[state.year].length > 0) {
					yearMap[state.year].forEach((element, index) => {
						if (element.mouth.slice(-2) == i + 1) {
							state.data1[i] = element.countSum;
						}
					})
				}
			}
			console.log(state.data1 + '##' + state.year);

		})
		.catch(function (error) {
			console.log(error);
		});
	const option = {
		backgroundColor: state.charts.bgColor,
		title: {
			text: "每月出入库详情",
			x: "left",
			textStyle: { fontSize: "15", color: state.charts.color },
		},
		grid: { top: 70, right: 20, bottom: 30, left: 60 }, //left设置左边的padding值
		tooltip: { trigger: "axis" },
		legend: { data: ["入库数量", "出库数量"], right: 0 },
		xAxis: {
			data: [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月",
				"7月",
				"8月",
				"9月",
				"10月",
				"11月",
				"12月",
			],
		},
		yAxis: [
			{
				type: "value",
				name: "数量",
				splitLine: { show: true, lineStyle: { type: "dashed", color: "#f5f5f5" } },
				axisLabel: {
					color: '#fff',
					formatter: '{value} '
				},
			},
		],
		series: [
			{
				name: "入库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.data,
				lineStyle: { color: "#fe9a8b" },
				itemStyle: { color: "#fe9a8b", borderColor: "#fe9a8b" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#fe9a8bb3" },
						{ offset: 1, color: "#fe9a8b03" },
					]),
				},
			},
			{
				name: "出库数量",
				type: "line",
				symbolSize: 6,
				symbol: "circle",
				smooth: true,
				data: state.data1,
				lineStyle: { color: "#9E87FF" },
				itemStyle: { color: "#9E87FF", borderColor: "#9E87FF" },
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: "#9E87FFb3" },
						{ offset: 1, color: "#9E87FF03" },
					]),
				},
				emphasis: {
					itemStyle: {
						color: {
							type: "radial",
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{ offset: 0, color: "#9E87FF" },
								{ offset: 0.4, color: "#9E87FF" },
								{ offset: 0.5, color: "#fff" },
								{ offset: 0.7, color: "#fff" },
								{ offset: 0.8, color: "#fff" },
								{ offset: 1, color: "#fff" },
							],
						},
						borderColor: "#9E87FF",
						borderWidth: 2,
					},
				},
			},
		],
	};
	//更新过后的option;使用 setOption 方法来更新图表选项，而不是重新设置整个 option。这样性能更好.
	//等数据请求到了再更新视图，不然会导致试图更新不完全
	state.global.MonthlyIandExChart.setOption(option, true, false);
	state.myCharts.push(state.global.MonthlyIandExChart);
}

// 页面加载时
onMounted(() => {
	initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => isTagsViewCurrenFull.value,
	() => {
		initEchartsResizeFun();
	}
);
// 监听 pinia 中是否开启深色主题
watch(
	() => themeConfig.value.isIsDark,
	(isIsDark) => {
		nextTick(() => {
			state.charts.theme = isIsDark ? "dark" : "";
			state.charts.bgColor = isIsDark ? "transparent" : "";
			state.charts.color = isIsDark ? "#dadada" : "#303133";
			setTimeout(() => {
				initLineChart();
			}, 500);
			setTimeout(() => {
				initPieChart();
			}, 700);
			// setTimeout(() => {
			//   initBarChart();
			// }, 1200);
			setTimeout(() => {
				initPieChart1();
			}, 1000);
			//每日的内容

			setTimeout(() => {
				initDayLineChart();
			}, 1100);
		});
	},
	{
		deep: true,
		immediate: true,
	}
);
</script>

<style scoped lang="scss">
$homeNavLengh: 8;

.home-container {
	width: 100%;
	overflow: hidden;
	// background-color: rgba(2, 15, 49, 1);
	background-image: url(../../assets/bg.jpg);
	background-size: cover;

	.home-card-item {

		height: 300px;
		border-radius: 4px;
		// transition: all ease 0.3s;
		padding: 20px;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.5);
		color: var(--el-text-color-primary);
		border: 1px solid var(--next-border-color-light);

		// &:hover {
		// 	box-shadow: 0 2px 12px var(--next-color-dark-hover);
		// 	transition: all ease 0.3s;
		// }

		// &-icon {
		// 	width: 70px;
		// 	height: 70px;
		// 	border-radius: 100%;
		// 	flex-shrink: 1;

		// 	i {
		// 		color: var(--el-text-color-placeholder);
		// 	}
		// }

		// &-title {
		// 	font-size: 15px;
		// 	font-weight: bold;
		// 	height: 30px;
		// }
	}
}

.home-card-one {
	@for $i from 0 through 3 {
		.home-one-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/4) + s;
		}
	}
}

// .home-card-two,
// .home-card-three {
// 	.home-card-item {
// 		height: 300px;
// 		// width: 100%;
// 		overflow: hidden;

// 		.home-monitor {
// 			// height: 100%;

// 			.flex-warp-item {
// 				// width: 25%;
// 				height: 111px;
// 				display: flex;

// 				.flex-warp-item-box {
// 					margin: auto;
// 					text-align: center;
// 					color: var(--el-text-color-primary);
// 					display: flex;
// 					flex-wrap: nowrap;
// 					border-radius: 5px;
// 					background: var(--next-bg-color);
// 					cursor: pointer;
// 					transition: all 0.3s ease;

// 					&:hover {
// 						background: var(--el-color-primary-light-9);
// 						transition: all 0.3s ease;
// 					}
// 				}

// 				@for $i from 0 through $homeNavLengh {
// 					.home-animation#{$i} {
// 						opacity: 0;
// 						animation-name: error-num;
// 						animation-duration: 0.5s;
// 						animation-fill-mode: forwards;
// 						animation-delay: calc($i/10) + s;
// 					}
// 				}
// 			}
// 		}
// 	}
// }


.no_underline {
	text-decoration: none;
}

//第一行数字的布局
.grid-content {
	background: rgba(255, 255, 255, 0.5);
	padding-left: 15px;
	padding-top: 15px;
	border-radius: 4px;
	// min-height: 120px;

	// flex: 1;
	display: flex;

	div {
		flex-shrink: 1;
		img{
			width: 70px;
			height: 70px
		}
	}

}

.name,
.value {
	font-weight: bold;
}

.value {
	font-size: 32px
}

.el-row {
	width: 100%;
	// display: flex;el-row原本就已经有的属性
	flex-wrap: nowrap;
	justify-content: space-between;
}

.lay {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.insideLay {
	border: 1px solid black;
	height: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(4, 80, 109, 0.4);
	color: #fff;
	padding: 10px;
}
</style>